<template>
  <!-- 手动模拟虚拟 DOM 节点 -->
  <div ref="div" id="real-container">
    <p>Real DOM</p>
    <div>cannot update</div>
    <ul>
      <li className="item">Item 1</li>
      <li className="item">Item 2</li>
      <li className="item">Item 3</li>
    </ul>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  mounted() {
    // this.init();
    var divv = this.$refs.div;
    console.log({ divv });

    // for ... in是为遍历对象属性而构建的，循环遍历的值都是数据结构的键值(key,value),
    for (var key in divv) {
      // 真实的DOM节点，哪怕一个最简单的div也包含着很多属性
      console.log({ key });
    }
  },
  methods: {
    init() {
      const tree = this.Element("div", { id: "virtual-container" }, [
        this.Element("p", {}, ["Virtual DOM"]),
        this.Element("div", {}, ["before update"]),
        this.Element("ul", {}, [
          this.Element("li", { class: "item" }, ["Item 1"]),
          this.Element("li", { class: "item" }, ["Item 2"]),
          this.Element("li", { class: "item" }, ["Item 3"]),
        ]),
      ]);

      const root = tree.render();
      document.getElementById("virtual-container").appendChild(root);
    },
    Element(tagName, props, children) {
      if (!(this instanceof Element)) {
        return new Element(tagName, props, children);
      }
    },
  },
};
</script>
<style scoped></style>
